<template>
	<view class="index-list" >
		<!-- 提示 -->
		
	<!-- 第一行 -->
	<view class="index-list1">
		
		<view @tap="gouserinfo" class="frist u-f-ajc">
			
				<image :src="item.userHeadr" mode="widthFix" lazy-load></image> <!-- 头像 -->
				<text>{{item.userName}}</text>
			
		</view>
		
		<view > 
				<u-toast ref="uToast" />
				<!--  -->   <!-- 关注 -->
				<text class="ff" v-if="isGuanZhu==0" @click="guanzhu"> + 关注</text>
				<text class="ff" v-else  @click="guanzhu">取消关注</text>
				
			
			
				<uni-icons type="clear" size="15" color="#D7D7D7"></uni-icons>
			
		</view>
		
	</view>
	
	<view class="index-list2"  @tap="godetaill(item)">
		{{item.title}}
	</view>	
	<view class="index-list3" @tap="godetaill(item)">
		<!-- 图片 -->
		<image  :src="item.imgSrc" mode="widthFix" lazy-load></image>
		<!-- 视频 -->
		<view class="index-list-play">
			<u-icon size="140" name="play-circle-fill" color="#FFFFFF"></u-icon>
		</view>
	<!-- 	信息 -->
		<view  class="index-list-play-info" v-if="item.type=='video'">
			{{item.play}}次播放
		</view>
		<view class="index-list-play-info" v-else>
			{{item.play}}次查看
		</view>
	</view>	
	<view class="index-list4 u-f-ajc">
		<view class="">
			<view class="u-f-ajc">
				
				<view class="" @tap="caozuo('ding')">
						
						<uni-icons type="hand-thumbsup-filled" color="#FFE597" size="22"  v-if="infoNum.infoType==1"></uni-icons>
						<uni-icons type="hand-thumbsup-filled" color="#D7D7D7" size="22" v-else></uni-icons>
						{{infoNum.cai}}
				</view>
				
				<view class="" @tap="caozuo('cai')">
					<uni-icons type="hand-thumbsdown-filled" color="#FFE597" size="22" v-if="infoNum.infoType===2"></uni-icons>
					<uni-icons type="hand-thumbsdown-filled" color="#D7D7D7" size="22" v-else></uni-icons>
					{{infoNum.ding}}
				</view>
			
				
			</view>
		</view>
		
		
		<view class="">
			<view class="u-f-ajc">
				<view  >
					<uni-icons type="chatbubble-filled" color="#D7D7D7" size="22"></uni-icons>
					{{item.infoNum.discussNum}}
				</view>
				<view class="">
						<uni-icons type="redo-filled" color="#D7D7D7" size="22"></uni-icons>
						{{item.infoNum.shareNum}}
				</view>
				
			</view>
		</view>
		
		
		
		
	</view>	
	</view>
</template>

<script>
	export default {
		props:{
			item:Object,
			index:Number
		},
		data(){
			return{
				isGuanZhu:this.item.isGuanZhu,
				infoNum:this.item.infoNum
			}
		},
		methods:{
			//到用户主页
			gouserinfo(){
				uni.navigateTo({
					url:'../../pages/user/user'
				})
			},
			//跳转到详情页面
			godetaill(item){
				uni.navigateTo({
					url:'../../pages/detaill/detaill?detaill='+JSON.stringify(item)
				})
			},
			//关注
			guanzhu(){
					if(this.isGuanZhu){
						this.$refs.uToast.show({
							title: '取消关注成功',
							type: 'success',
							position:'top'
						})
					}else{
					this.$refs.uToast.show({
						title: '关注成功',
						type: 'success',
						position:'top'
					})	
					}
					
				this.isGuanZhu=!this.isGuanZhu
			},
			//顶踩
			caozuo(type){
				
				switch (type){
					case 'ding':
					
					if(this.infoNum.infoType==1){
						return
					}
					if(this.infoNum.infoType==2){
						this.infoNum.ding++
						this.infoNum.cai--
					}
					if(this.infoNum.infoType==0){
						console.log("我点了顶"+this.infoNum.ding)
						this.infoNum.cai++
						
					}
					this.infoNum.infoType=1
						
						break;
						
						
					case 'cai':
					if(this.infoNum.infoType==2){
						return
					}
					if(this.infoNum.infoType==1){
						this.infoNum.ding--
						console.log(this.infoNum.ding)
						this.infoNum.cai++
					}
					if(this.infoNum.infoType==0){
						
						this.infoNum.ding++
						
					}
					this.infoNum.infoType=2
				
					
						break;	
					default:
						break;
				}
				
			}
		}
	}
</script>

<style scoped>

	.index-list{
		background-color: #FFFFFF;
		padding: 20upx;
		border-bottom: #D7D7D7 1upx solid;
	}
	
	.index-list1:first-child{
		color: #9D9D9D;
		display: flex;
		align-items: center;
		justify-content:space-between;
			
	}

	.index-list2{
		margin-top: 10upx;
		margin-bottom: 20upx;	
		color: #090909;
		font-size: 30upx;
	}
	.ff{
		background-color: #F3F3F3;
		margin-right: 20upx;
	}
	.index-list1>view image{
		width: 95upx;
		height: 95upx;
		border-radius: 100%;
		margin-right: 20upx;
		
	}
	.index-list3{
		display: flex;
		position: relative;
	}
	
	.index-list3 image{
		width: 100%;
		border-radius:5%;
	}
	.index-list4{
		justify-content: space-between;
		margin-top: 10upx;
		margin-bottom: 20upx;
	}

	.index-list4>view>view>view{
		font-size: 40upx;
		margin-right: 30upx;
		color: #D7D7D7
	
	}
	.index-list4>view>view>view>uni-icons{
		
		margin-right: 10upx;
	
	}
	.index-list-play{
		position: absolute;
		left: 270upx;
		bottom: 140upx;
	}
	.index-list-play-info{
	position: absolute;	
	color: #FFFFFF;
	font-size: 20upx;
	background-color: rgba(51, 51, 51, 0.55);
	padding: 0 12 12 0;
	border-radius: 10%;
	bottom: 12upx;
	right: 12upx;
	}
</style>
